import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'edit_logic.dart';

class AddPassPage extends StatelessWidget {
  const AddPassPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "创建新密码",
          style: TextStyle(fontSize: 16),
        ),
        actions: [
          Container(
            width: 60,
            color: const Color(0xFF1494B3),
            child: GestureDetector(
              onTap: () => {
                Get.find<EditPassLogic>().submitForm(),
              },
              child: const Center(
                child: Text(
                  "保存",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
      body: Center(
        child: Container(
          width: 360,
          color: Colors.white,
          child: Column(
            children: [
              TextField(
                controller: Get.find<EditPassLogic>().titleController,
                maxLength: 30,
                decoration: InputDecoration(
                  labelText: "标题",
                  prefixIcon: const Icon(Icons.title),
                  suffix: GestureDetector(
                    onTap: () =>
                        {Get.find<EditPassLogic>().titleController.clear()},
                    child: const Icon(
                      Icons.clear,
                      size: 18,
                    ),
                  ),
                ),
              ),
              TextField(
                controller: Get.find<EditPassLogic>().userController,
                maxLength: 64,
                maxLines: 3,
                minLines: 1,
                keyboardType: TextInputType.multiline,
                decoration: InputDecoration(
                  labelText: "账号",
                  prefixIcon: const Icon(Icons.person),
                  suffix: GestureDetector(
                    onTap: () =>
                        {Get.find<EditPassLogic>().userController.clear()},
                    child: const Icon(
                      Icons.clear,
                      size: 18,
                    ),
                  ),
                ),
              ),
              TextField(
                controller: Get.find<EditPassLogic>().passController,
                focusNode: Get.find<EditPassLogic>().passFocusNode,
                maxLength: 64,
                maxLines: 3,
                minLines: 1,
                keyboardType: TextInputType.multiline,
                decoration: InputDecoration(
                    labelText: "密码",
                    helperText: "请输入密码密码,或点击右侧按钮自动生成",
                    prefixIcon: const Icon(Icons.lock),
                    suffix: GestureDetector(
                      onTap: () => {Get.find<EditPassLogic>().randomPassword()},
                      child: const Icon(
                        Icons.refresh,
                        size: 22,
                        color: Colors.green,
                      ),
                    )),
              ),
              GetBuilder<EditPassLogic>(
                id: "passConfig",
                builder: (logic) {
                  return Offstage(
                    offstage: !logic.openPass,
                    child: _buildPassConfig(),
                  );
                },
              ),
              TextField(
                controller: Get.find<EditPassLogic>().urlController,
                maxLength: 100,
                maxLines: 4,
                minLines: 1,
                keyboardType: TextInputType.multiline,
                decoration: InputDecoration(
                  labelText: "网址",
                  prefixIcon: const Icon(Icons.public),
                  suffix: GestureDetector(
                    onTap: () =>
                        {Get.find<EditPassLogic>().urlController.clear()},
                    child: const Icon(
                      Icons.clear,
                      size: 18,
                    ),
                  ),
                ),
              ),
              TextField(
                controller: Get.find<EditPassLogic>().noteController,
                maxLength: 200,
                maxLines: 7,
                minLines: 1,
                keyboardType: TextInputType.multiline,
                decoration: InputDecoration(
                  labelText: "备注",
                  prefixIcon: const Icon(Icons.note),
                  suffix: GestureDetector(
                    onTap: () =>
                        {Get.find<EditPassLogic>().noteController.clear()},
                    child: const Icon(
                      Icons.clear,
                      size: 18,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  ///自动生成密码配置窗口
  Widget _buildPassConfig() {
    return Center(
      child: Container(
        color: const Color(0xFCF4F4FF),
        // width: 200,
        height: 230,
        padding: const EdgeInsets.all(10),
        margin: const EdgeInsets.only(top: 10),
        child: Column(
          children: [
            Row(
              children: [
                const Text('长度'),
                GetBuilder<EditPassLogic>(
                    id: "passSlider",
                    builder: (logic) {
                      return SizedBox(
                        width: 150,
                        height: 30,
                        child: Slider(
                          value: logic.passLength,
                          onChanged: (val) {
                            logic.changePassLength(val);
                          },
                          mouseCursor: MouseCursor.defer,
                          min: 6.0,
                          max: 64.0,
                          divisions: 58,
                          label: logic.passLength.toInt().toString(),
                          activeColor: Colors.blue,
                          inactiveColor: Colors.grey,
                        ),
                      );
                    })
              ],
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                const Text("数字"),
                const SizedBox(
                  width: 30,
                ),
                GetBuilder<EditPassLogic>(
                    id: "passNumberSwitch",
                    builder: (logic) {
                      return Switch(
                        value: logic.passNumber,
                        onChanged: (val) {
                          logic.changePassNumber(val);
                        },
                      );
                    }),
              ],
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                const Text("字母"),
                const SizedBox(
                  width: 30,
                ),
                GetBuilder<EditPassLogic>(
                    id: "passLetterSwitch",
                    builder: (logic) {
                      return Switch(
                        value: logic.passLetter,
                        onChanged: (val) {
                          logic.changePassLetter(val);
                        },
                      );
                    }),
              ],
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                const Text("符号"),
                const SizedBox(
                  width: 30,
                ),
                GetBuilder<EditPassLogic>(
                    id: "passSymbolSwitch",
                    builder: (logic) {
                      return Switch(
                        value: logic.passSymbol,
                        onChanged: (val) {
                          logic.changePassSymbol(val);
                        },
                      );
                    }),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _processDialog(){
    return const AlertDialog(
      backgroundColor: Colors.transparent,
      title: Text("处理中,请等待..."),
      content: LinearProgressIndicator(
        value: 0.3,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
        backgroundColor: Colors.blue,
      ),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))
      ),
    );
  }
}
